<template>
  <div class="address">
    <div class="ad_box">
      <ul class="tab">
        <li @click="tabList(0)" :class="index == 0 ?'active' : ''">快递配送</li>
        <li @click="tabList(1)" :class="index == 1 ?'active' : ''">到店自提</li>
      </ul>
      <div class="tt_com">
        <div class="box box1" v-if="is_default == 1">
          <div class="td">
            <span class="name">{{ addressInfo.real_name }}</span
            ><span class="phone">{{ addressInfo.phone }}</span>
          </div>
          <div class="tt_address" @click="openAddress">
            <span >[默认]</span>{{ address1 }}
          </div>
        </div>

        <div class="box box2" v-else>
          <div class="box box1">
            <div class="td">
              <span class="name">{{ item.real_name }}</span
              ><span class="phone">{{ item.phone }}</span>
            </div>
            <div class="tt_address" @click="openAddress">
              {{ address2 }}
            </div>
          </div>
        </div>

        <div class="icon">
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    <div class="mask" v-if="isShow" @click="closeAddress"></div>

    <transition name="shang">
      <address-list
        v-if="isShow"
        :is_default="is_default"
        :address_id="aid"
        
        @closeAddress="_closeAddress"
        @change-address="changeAddress"
      ></address-list>
    </transition>
  </div>
</template>

<script>
import AddressList from "@/views/order/submit/AddressList.vue";
export default {
  data() {
    return {
        item:{},
    index:0,
      is_default: 1,
     
      isShow: false,

      aid:0,
    };
  },
  computed: {
    address1() {
      return (
        this.addressInfo.province +
        this.addressInfo.city +
        this.addressInfo.district +
        this.addressInfo.detail
      );
    },
    address2() {
      return (
        this.item.province +
        this.item.city +
        this.item.district +
        this.item.detail
      );
    },
  },
  props: {
    addressInfo: {
      type: Object,
    },
    id:{
        type:Number
    }
  },
    watch:{
        id:{
            immediate:true,
            deep:true,
            handler(val){
                this.aid = val
            }
        }
    },

  components: {
    AddressList,
  },
  mounted() {
   
  },
  methods: {
    openAddress() {
      this.isShow = true;
    },
    closeAddress() {
      this.isShow = false;
    },
    _closeAddress(val) {
      this.isShow = val;
    },

    changeAddress(item){
        this.item = item
        this.is_default = item.is_default
        this.aid = item.id
    }

    ,tabList(index){
        if(index == 1){
            this.$toast.show("无法到店自取！",500)
            return;
        }
        this.index = index

    }
},
};
</script>

<style lang="scss" scoped>
.address {
  padding: 12px 12px 12px 12px;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#e93323),
    to(#f5f5f5)
  );
  background-image: linear-gradient(180deg, #e93323 0, #f5f5f5);
  background-image: -moz-linear-gradient(to bottom, #e93323 0, #f5f5f5 100%);
  .ad_box {
    width: 100%;

    border-radius: 5px;
    overflow: hidden;
    .tab {
      width: 100%;
      height: 50px;
      display: flex;

      position: relative;
      li {
        height: 38px;
        line-height: 38px;
        text-align: center;
        width: 60%;
        font-size: 15px;
        background-color: #f7c1bd;
        color: #fc4141;
      }
      li:nth-child(1) {
        position: absolute;
        bottom: 0px;
        left: 0px;
      }
      li:nth-child(2) {
        position: absolute;
        bottom: 0px;
        right: 0px;
      }

      li.active {
        height: 43px;
        width: 50%;
        line-height: 50px;
        z-index: 1;
        background-color: #fff;
        // &::after{

        //     content: "";
        //     width: 0;
        //     height: 0;
        //     display: block;
        //     position:absolute;
        //     right: 0px;
        //     bottom: 0px;
        //     border: 30px solid transparent;
        //     border-bottom-color: red;
        //     transform: rotate(-135deg);
        // }
      }
    }
    .tt_com {
      background-color: #fff;
      border-bottom: 1px solid #f7c1bd;
      padding: 10px 12px 18px;
      position: relative;
      .td {
        color: #282828;
        font-size: 15px;
        font-weight: 700;
        .name {
          margin-right: 25px;
        }
      }
      .tt_address {
        
        color: #aaaa;
        font-size: 13px;
        height: 30px;
        line-height: 30px;
        span {
          color: #fc4141;
          font-size: 14px;
          margin-right: 5px;
        }
      }

      .icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 8px;
        color: #282828;
        font-size: 17px;
      }
    }
  }
}
</style>

